Frontend Performance API: เชี่ยวชาญ Navigation และ Resource Timing

ในโลกดิจิทัลปัจจุบัน ประสิทธิภาพของเว็บไซต์เป็นสิ่งสำคัญอย่างยิ่ง เว็บไซต์ที่ช้าอาจนำไปสู่ผู้ใช้ที่ไม่พอใจ อัตราการตีกลับ (bounce rates) ที่สูงขึ้น และท้ายที่สุดคือการสูญเสียรายได้ Frontend Performance API เป็นเครื่องมืออันทรงพลังในการวัดและวิเคราะห์แง่มุมต่างๆ ของประสิทธิภาพเว็บไซต์ของคุณ ช่วยให้คุณสามารถระบุคอขวดและปรับปรุงเพื่อประสบการณ์ผู้ใช้ที่รวดเร็วและตอบสนองได้ดียิ่งขึ้น คู่มือฉบับสมบูรณ์นี้จะสำรวจ Navigation และ Resource Timing APIs พร้อมนำเสนอตัวอย่างที่นำไปใช้ได้จริงและข้อมูลเชิงลึกสำหรับนักพัฒนาทั่วโลก

ทำความเข้าใจความจำเป็นของการติดตามประสิทธิภาพ

ก่อนที่จะเจาะลึกถึงรายละเอียดของ API เรามาทำความเข้าใจกันก่อนว่าทำไมการติดตามประสิทธิภาพจึงมีความสำคัญ:

• ประสบการณ์ผู้ใช้: เว็บไซต์ที่รวดเร็วนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้น เพิ่มความพึงพอใจและการมีส่วนร่วมของผู้ใช้
• Search Engine Optimization (SEO): เครื่องมือค้นหาอย่าง Google พิจารณาความเร็วของเว็บไซต์เป็นปัจจัยในการจัดอันดับ
• อัตราการแปลง (Conversion Rates): เว็บไซต์ที่เร็วขึ้นมักจะมีอัตราการแปลงที่สูงขึ้น ผู้ใช้มีแนวโน้มที่จะทำการซื้อหรือลงทะเบียนบริการให้เสร็จสิ้นหากเว็บไซต์ตอบสนองได้ดี
• ประสิทธิภาพบนมือถือ: ด้วยการใช้อุปกรณ์มือถือที่เพิ่มขึ้น การปรับปรุงประสิทธิภาพสำหรับมือถือจึงเป็นสิ่งจำเป็น
• การเข้าถึงทั่วโลก: ผู้ใช้จากส่วนต่างๆ ของโลกอาจประสบกับสภาพเครือข่ายที่แตกต่างกัน การติดตามประสิทธิภาพช่วยให้มั่นใจได้ว่าผู้ใช้ทุกคนจะได้รับประสบการณ์ที่สม่ำเสมอ ไม่ว่าจะอยู่ที่ใดก็ตาม

ขอแนะนำ Frontend Performance API

Frontend Performance API คือชุดของอินเทอร์เฟซ JavaScript ที่ให้การเข้าถึงตัวชี้วัดประสิทธิภาพโดยละเอียดของหน้าเว็บ ช่วยให้นักพัฒนาสามารถวัดระยะเวลาที่ใช้ในการโหลดหน้าเว็บ การดึงข้อมูลทรัพยากร และการประมวลผลเหตุการณ์ต่างๆ ข้อมูลนี้สามารถนำไปใช้เพื่อระบุคอขวดของประสิทธิภาพและปรับปรุงเว็บไซต์เพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น

อินเทอร์เฟซหลักคือ Performance ซึ่งสามารถเข้าถึงได้ผ่าน window.performance อินเทอร์เฟซนี้มีเมธอดและคุณสมบัติต่างๆ สำหรับการเข้าถึงข้อมูลที่เกี่ยวข้องกับประสิทธิภาพ

Navigation Timing API: การวัดประสิทธิภาพการโหลดหน้าเว็บ

Navigation Timing API ให้ข้อมูลเวลาโดยละเอียดเกี่ยวกับขั้นตอนต่างๆ ของกระบวนการโหลดหน้าเว็บ ซึ่งช่วยให้คุณสามารถระบุได้อย่างแม่นยำว่าความล่าช้าเกิดขึ้นที่ใดและมุ่งเน้นความพยายามในการปรับปรุงได้อย่างตรงจุด

ตัวชี้วัดสำคัญที่ได้จาก Navigation Timing

• navigationStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มโหลดหน้าเว็บ
• unloadEventStart: ประทับเวลาเมื่อเหตุการณ์ unload เริ่มขึ้นในหน้าก่อนหน้า
• unloadEventEnd: ประทับเวลาเมื่อเหตุการณ์ unload สิ้นสุดลงในหน้าก่อนหน้า
• redirectStart: ประทับเวลาเมื่อการเปลี่ยนเส้นทาง (redirect) เริ่มขึ้น
• redirectEnd: ประทับเวลาเมื่อการเปลี่ยนเส้นทางสิ้นสุดลง
• fetchStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มดึงข้อมูลเอกสาร
• domainLookupStart: ประทับเวลาเมื่อการค้นหาชื่อโดเมนเริ่มขึ้น
• domainLookupEnd: ประทับเวลาเมื่อการค้นหาชื่อโดเมนสิ้นสุดลง
• connectStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มสร้างการเชื่อมต่อกับเซิร์ฟเวอร์
• connectEnd: ประทับเวลาเมื่อเบราว์เซอร์สร้างการเชื่อมต่อกับเซิร์ฟเวอร์เสร็จสิ้น
• secureConnectionStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มการจับมือเพื่อสร้างการเชื่อมต่อที่ปลอดภัย (secure connection handshake)
• requestStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มร้องขอเอกสารจากเซิร์ฟเวอร์
• responseStart: ประทับเวลาเมื่อเบราว์เซอร์ได้รับไบต์แรกของการตอบกลับจากเซิร์ฟเวอร์
• responseEnd: ประทับเวลาเมื่อเบราว์เซอร์รับการตอบกลับจากเซิร์ฟเวอร์เสร็จสิ้น
• domLoading: ประทับเวลาเมื่อเบราว์เซอร์เริ่มแยกวิเคราะห์ (parse) เอกสาร HTML
• domInteractive: ประทับเวลาเมื่อเบราว์เซอร์แยกวิเคราะห์เอกสาร HTML เสร็จสิ้นและ DOM พร้อมใช้งาน
• domContentLoadedEventStart: ประทับเวลาเมื่อเหตุการณ์ DOMContentLoaded เริ่มขึ้น
• domContentLoadedEventEnd: ประทับเวลาเมื่อเหตุการณ์ DOMContentLoaded สิ้นสุดลง
• domComplete: ประทับเวลาเมื่อเบราว์เซอร์แยกวิเคราะห์เอกสาร HTML และโหลดทรัพยากรทั้งหมดเสร็จสิ้น
• loadEventStart: ประทับเวลาเมื่อเหตุการณ์ load เริ่มขึ้น
• loadEventEnd: ประทับเวลาเมื่อเหตุการณ์ load สิ้นสุดลง

การเข้าถึงข้อมูล Navigation Timing

คุณสามารถเข้าถึงข้อมูล Navigation Timing ได้โดยใช้คุณสมบัติ performance.timing:

            
const navigationTiming = performance.timing;

console.log('Navigation Start:', navigationTiming.navigationStart);
console.log('Domain Lookup Time:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Connect Time:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Response Time:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM Interactive:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM Complete:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Load Time:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

การตีความข้อมูล Navigation Timing

การวิเคราะห์ข้อมูล Navigation Timing สามารถเปิดเผยข้อมูลเชิงลึกที่มีค่าเกี่ยวกับประสิทธิภาพของเว็บไซต์ของคุณได้ ตัวอย่างเช่น:

• เวลาค้นหา DNS สูง (High DNS Lookup Time): บ่งชี้ถึงปัญหาที่อาจเกิดขึ้นกับผู้ให้บริการ DNS ของคุณหรือการแก้ปัญหา DNS ที่ช้า
• เวลาเชื่อมต่อสูง (High Connect Time): บ่งชี้ถึงปัญหาเกี่ยวกับการเชื่อมต่อเครือข่ายของเซิร์ฟเวอร์ของคุณหรือ TLS handshake ที่ช้า
• เวลาตอบสนองสูง (High Response Time): บ่งชี้ถึงการประมวลผลฝั่งเซิร์ฟเวอร์ที่ช้าหรือขนาดการตอบสนองที่ใหญ่
• เวลา DOM Interactive สูง (High DOM Interactive Time): บ่งชี้ถึงโค้ด JavaScript ที่ไม่มีประสิทธิภาพหรือโครงสร้าง DOM ที่ซับซ้อน
• เวลา DOM Complete สูง (High DOM Complete Time): บ่งชี้ถึงการโหลดทรัพยากรที่ช้า เช่น รูปภาพ สคริปต์ และสไตล์ชีต

ตัวอย่าง: การคำนวณ Time to First Byte (TTFB)

Time to First Byte (TTFB) เป็นตัวชี้วัดที่สำคัญซึ่งวัดระยะเวลาที่เบราว์เซอร์ใช้ในการรับข้อมูลไบต์แรกจากเซิร์ฟเวอร์ TTFB ที่ต่ำเป็นสิ่งจำเป็นสำหรับประสบการณ์ผู้ใช้ที่รวดเร็ว

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Time to First Byte (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

TTFB ที่สูงอาจเกิดจากการประมวลผลฝั่งเซิร์ฟเวอร์ที่ช้า ความหน่วงของเครือข่าย หรือปัญหาเกี่ยวกับโครงสร้างพื้นฐานของเซิร์ฟเวอร์ การปรับปรุงการกำหนดค่าเซิร์ฟเวอร์ของคุณ การใช้ Content Delivery Network (CDN) และการลดความหน่วงของเครือข่ายสามารถช่วยลด TTFB ได้

Resource Timing API: การวัดประสิทธิภาพการโหลดทรัพยากร

Resource Timing API ให้ข้อมูลเวลาโดยละเอียดเกี่ยวกับการโหลดทรัพยากรแต่ละรายการบนหน้าเว็บ เช่น รูปภาพ สคริปต์ สไตล์ชีต และฟอนต์ ซึ่งช่วยให้คุณสามารถระบุได้ว่าทรัพยากรใดใช้เวลาโหลดนานที่สุดและปรับปรุงให้เหมาะสม

ตัวชี้วัดสำคัญที่ได้จาก Resource Timing

• name: URL ของทรัพยากร
• initiatorType: ประเภทขององค์ประกอบที่เริ่มต้นการร้องขอทรัพยากร (เช่น img, script, link)
• startTime: ประทับเวลาเมื่อเบราว์เซอร์เริ่มดึงข้อมูลทรัพยากร
• redirectStart: ประทับเวลาเมื่อการเปลี่ยนเส้นทางเริ่มขึ้น
• redirectEnd: ประทับเวลาเมื่อการเปลี่ยนเส้นทางสิ้นสุดลง
• fetchStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มดึงข้อมูลทรัพยากร
• domainLookupStart: ประทับเวลาเมื่อการค้นหาชื่อโดเมนเริ่มขึ้น
• domainLookupEnd: ประทับเวลาเมื่อการค้นหาชื่อโดเมนสิ้นสุดลง
• connectStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มสร้างการเชื่อมต่อกับเซิร์ฟเวอร์
• connectEnd: ประทับเวลาเมื่อเบราว์เซอร์สร้างการเชื่อมต่อกับเซิร์ฟเวอร์เสร็จสิ้น
• secureConnectionStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มการจับมือเพื่อสร้างการเชื่อมต่อที่ปลอดภัย
• requestStart: ประทับเวลาเมื่อเบราว์เซอร์เริ่มร้องขอทรัพยากรจากเซิร์ฟเวอร์
• responseStart: ประทับเวลาเมื่อเบราว์เซอร์ได้รับไบต์แรกของการตอบกลับจากเซิร์ฟเวอร์
• responseEnd: ประทับเวลาเมื่อเบราว์เซอร์รับการตอบกลับจากเซิร์ฟเวอร์เสร็จสิ้น
• duration: เวลารวมที่ใช้ในการโหลดทรัพยากร

การเข้าถึงข้อมูล Resource Timing

คุณสามารถเข้าถึงข้อมูล Resource Timing ได้โดยใช้เมธอด performance.getEntriesByType('resource'):

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Resource Name:', resource.name);
  console.log('Initiator Type:', resource.initiatorType);
  console.log('Duration:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

การตีความข้อมูล Resource Timing

การวิเคราะห์ข้อมูล Resource Timing สามารถช่วยให้คุณระบุทรัพยากรที่โหลดช้าและปรับปรุงเพื่อให้โหลดได้เร็วขึ้น ตัวอย่างเช่น:

• รูปภาพขนาดใหญ่: ปรับปรุงรูปภาพโดยการบีบอัดและใช้รูปแบบไฟล์ที่เหมาะสม (เช่น WebP)
• สคริปต์และสไตล์ชีตที่ไม่ได้ปรับปรุง: ทำการ Minify และบีบอัดสคริปต์และสไตล์ชีตเพื่อลดขนาดไฟล์
• ฟอนต์ที่โหลดช้า: ใช้เว็บฟอนต์อย่างมีประสิทธิภาพโดยการทำ subsetting และใช้คุณสมบัติ font-display
• ทรัพยากรของบุคคลที่สาม: ประเมินผลกระทบด้านประสิทธิภาพของทรัพยากรของบุคคลที่สามและพิจารณาทางเลือกอื่นหากจำเป็น

ตัวอย่าง: การระบุรูปภาพที่โหลดช้า

ตัวอย่างนี้แสดงวิธีระบุรูปภาพที่โหลดช้าโดยใช้ Resource Timing API:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Slow-loading images detected:');
  slowImages.forEach(image => {
    console.log('Image URL:', image.name);
    console.log('Duration:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

เมื่อคุณระบุรูปภาพที่โหลดช้าได้แล้ว คุณสามารถปรับปรุงโดยการบีบอัด ปรับขนาดให้เหมาะสม และใช้เทคนิค lazy loading

ตัวอย่างและการใช้งานจริง

สถานการณ์จริง: การปรับปรุงเว็บไซต์อีคอมเมิร์ซ

พิจารณาเว็บไซต์อีคอมเมิร์ซที่ให้บริการลูกค้าทั่วโลก การวิเคราะห์ข้อมูล Navigation และ Resource Timing พบปัญหาดังต่อไปนี้:

• TTFB สูงสำหรับผู้ใช้ในเอเชีย: บ่งชี้ถึงการประมวลผลฝั่งเซิร์ฟเวอร์ที่ช้าหรือความหน่วงของเครือข่ายระหว่างเซิร์ฟเวอร์ต้นทางและผู้ใช้ในเอเชีย
• รูปภาพสินค้าที่โหลดช้า: รูปภาพไม่ได้รับการปรับปรุงสำหรับเว็บ ส่งผลให้ใช้เวลาในการโหลดนาน
• ไฟล์ JavaScript ที่ไม่ได้ปรับปรุง: ไฟล์ JavaScript ไม่ได้ถูก minify และบีบอัด ทำให้ขนาดไฟล์เพิ่มขึ้น

จากข้อค้นพบเหล่านี้ สามารถดำเนินการปรับปรุงดังต่อไปนี้ได้:

• ใช้ Content Delivery Network (CDN): กระจายเนื้อหาเว็บไซต์ไปยังเซิร์ฟเวอร์หลายแห่งทั่วโลกเพื่อลดความหน่วงสำหรับผู้ใช้ในภูมิภาคต่างๆ
• ปรับปรุงรูปภาพสินค้า: บีบอัดรูปภาพโดยใช้เครื่องมือเช่น ImageOptim หรือ TinyPNG และใช้รูปแบบไฟล์ที่เหมาะสมเช่น WebP
• Minify และบีบอัดไฟล์ JavaScript: ใช้เครื่องมือเช่น UglifyJS หรือ Terser เพื่อ minify ไฟล์ JavaScript และ Gzip หรือ Brotli เพื่อบีบอัด
• Lazy load รูปภาพ: ใช้ lazy loading สำหรับรูปภาพที่อยู่ด้านล่างของหน้าจอ (below the fold) เพื่อปรับปรุงเวลาในการโหลดหน้าเว็บเริ่มต้น

หลังจากดำเนินการปรับปรุงเหล่านี้ ประสิทธิภาพของเว็บไซต์ก็ดีขึ้นอย่างมีนัยสำคัญ ส่งผลให้ประสบการณ์ผู้ใช้ดีขึ้น อัตราการแปลงสูงขึ้น และอันดับ SEO ที่ดีขึ้น

การปรับปรุงประสิทธิภาพบนมือถือ

ผู้ใช้มือถือมักประสบปัญหาการเชื่อมต่อเครือข่ายที่ช้ากว่าผู้ใช้เดสก์ท็อป การปรับปรุงประสิทธิภาพสำหรับมือถือจึงมีความสำคัญอย่างยิ่งต่อการมอบประสบการณ์ผู้ใช้ที่ราบรื่นบนอุปกรณ์พกพา

ต่อไปนี้เป็นเทคนิคการปรับปรุงสำหรับมือถือโดยเฉพาะ:

• ใช้รูปภาพที่ปรับขนาดตามหน้าจอ (responsive images): ให้บริการรูปภาพขนาดต่างๆ กันตามขนาดหน้าจอของอุปกรณ์เพื่อลดปริมาณข้อมูลที่ถ่ายโอนผ่านเครือข่าย
• ปรับให้เหมาะกับการสัมผัส: ตรวจสอบให้แน่ใจว่าปุ่มและลิงก์มีขนาดใหญ่พอและมีระยะห่างเพียงพอเพื่อให้สามารถแตะได้ง่ายบนอุปกรณ์สัมผัส
• ลดคำขอ HTTP ให้น้อยที่สุด: ลดจำนวนคำขอ HTTP โดยการรวมไฟล์ CSS และ JavaScript, การทำ inlining CSS ที่สำคัญ และการใช้ CSS sprites
• จัดลำดับความสำคัญของเนื้อหาที่มองเห็นได้ก่อน (above-the-fold): โหลดเนื้อหาที่มองเห็นได้บนหน้าจอก่อนเพื่อปรับปรุงประสิทธิภาพที่ผู้ใช้รับรู้ได้ของเว็บไซต์

นอกเหนือจาก Navigation และ Resource Timing: สำรวจ Performance APIs อื่นๆ

แม้ว่า Navigation และ Resource Timing จะมีความสำคัญ แต่ Frontend Performance API ยังมีเครื่องมืออื่นๆ อีกมากมายสำหรับการวิเคราะห์ประสิทธิภาพในเชิงลึก:

• User Timing API: ช่วยให้คุณสามารถกำหนดตัวชี้วัดประสิทธิภาพของคุณเองและวัดระยะเวลาที่ใช้สำหรับเหตุการณ์เฉพาะในแอปพลิเคชันของคุณ
• Long Tasks API: ช่วยให้คุณระบุงานที่ใช้เวลานานซึ่งบล็อกเธรดหลักและส่งผลกระทบต่อการตอบสนองของแอปพลิเคชันของคุณ
• Paint Timing API: ให้ตัวชี้วัดที่เกี่ยวข้องกับการแสดงผลของหน้า เช่น First Paint (FP) และ First Contentful Paint (FCP)
• Largest Contentful Paint (LCP): วัดระยะเวลาที่องค์ประกอบเนื้อหาที่ใหญ่ที่สุดใน viewport จะปรากฏให้เห็น
• Cumulative Layout Shift (CLS): วัดปริมาณการเปลี่ยนแปลงเค้าโครงที่ไม่คาดคิดซึ่งเกิดขึ้นระหว่างการโหลดหน้าเว็บ
• Event Timing API: ให้ข้อมูลเวลาโดยละเอียดเกี่ยวกับการโต้ตอบของผู้ใช้กับหน้าเว็บ เช่น เหตุการณ์การคลิกและการกดแป้นพิมพ์

เครื่องมือสำหรับการวิเคราะห์ข้อมูลประสิทธิภาพ

มีเครื่องมือหลายอย่างที่สามารถช่วยคุณวิเคราะห์ข้อมูล Navigation และ Resource Timing และระบุคอขวดของประสิทธิภาพได้:

• Browser Developer Tools: เบราว์เซอร์สมัยใหม่ส่วนใหญ่มีเครื่องมือสำหรับนักพัฒนาในตัวที่ให้คุณตรวจสอบข้อมูล Navigation และ Resource Timing, วิเคราะห์คำขอเครือข่าย และทำโปรไฟล์โค้ด JavaScript
• WebPageTest: เครื่องมือออนไลน์ฟรีที่ให้คุณทดสอบประสิทธิภาพของเว็บไซต์ของคุณจากสถานที่และเบราว์เซอร์ต่างๆ
• Lighthouse: เครื่องมืออัตโนมัติแบบโอเพนซอร์สสำหรับปรับปรุงคุณภาพของหน้าเว็บ มีการตรวจสอบประสิทธิภาพ การเข้าถึง Progressive Web Apps, SEO และอื่นๆ
• Google PageSpeed Insights: เครื่องมือออนไลน์ฟรีที่วิเคราะห์ประสิทธิภาพของเว็บไซต์ของคุณและให้คำแนะนำในการปรับปรุง
• New Relic, Datadog และเครื่องมือ APM อื่นๆ: นำเสนอความสามารถในการตรวจสอบและวิเคราะห์ประสิทธิภาพโดยละเอียดสำหรับเว็บแอปพลิเคชัน

แนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับปรุงประสิทธิภาพเว็บ

ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุดทั่วไปสำหรับการปรับปรุงประสิทธิภาพเว็บ:

• ลดคำขอ HTTP ให้น้อยที่สุด: ลดจำนวนคำขอ HTTP โดยการรวมไฟล์ CSS และ JavaScript, การใช้ CSS sprites และการทำ inlining CSS ที่สำคัญ
• ใช้ Content Delivery Network (CDN): กระจายเนื้อหาของเว็บไซต์ของคุณไปยังเซิร์ฟเวอร์หลายแห่งทั่วโลกเพื่อลดความหน่วงสำหรับผู้ใช้ในภูมิภาคต่างๆ
• ปรับปรุงรูปภาพ: บีบอัดรูปภาพ, ใช้รูปแบบไฟล์ที่เหมาะสม (เช่น WebP) และใช้รูปภาพที่ปรับขนาดตามหน้าจอ
• Minify และบีบอัด CSS และ JavaScript: ลดขนาดไฟล์ของ CSS และ JavaScript โดยการ minify และบีบอัด
• ใช้ประโยชน์จากแคชของเบราว์เซอร์: กำหนดค่าเซิร์ฟเวอร์ของคุณให้ตั้งค่า cache headers ที่เหมาะสมเพื่อให้เบราว์เซอร์สามารถแคชทรัพยากรคงที่ได้
• ปรับปรุงเว็บฟอนต์: ทำ subsetting เว็บฟอนต์, ใช้คุณสมบัติ font-display และโฮสต์ฟอนต์บนโดเมนของคุณเอง
• เลื่อนการโหลดทรัพยากรที่ไม่สำคัญ: ใช้ lazy loading สำหรับรูปภาพที่อยู่ด้านล่างของหน้าจอและเลื่อนการโหลดไฟล์ JavaScript ที่ไม่สำคัญ
• ตรวจสอบประสิทธิภาพอย่างสม่ำเสมอ: ติดตามประสิทธิภาพของเว็บไซต์ของคุณอย่างต่อเนื่องโดยใช้ Frontend Performance API และเครื่องมืออื่นๆ เพื่อระบุและแก้ไขปัญหาด้านประสิทธิภาพในเชิงรุก

สรุป

Frontend Performance API โดยเฉพาะ Navigation และ Resource Timing APIs ให้ข้อมูลเชิงลึกอันล้ำค่าเกี่ยวกับประสิทธิภาพของเว็บไซต์ของคุณ ด้วยการทำความเข้าใจและใช้ประโยชน์จาก API เหล่านี้ คุณสามารถระบุคอขวดของประสิทธิภาพ ปรับปรุงเว็บไซต์ของคุณให้โหลดเร็วขึ้น และท้ายที่สุดคือมอบประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับผู้ชมทั่วโลกของคุณ อย่าลืมตรวจสอบประสิทธิภาพของเว็บไซต์ของคุณอย่างต่อเนื่องและปรับกลยุทธ์การปรับปรุงตามความจำเป็นเพื่อก้าวนำหน้าและรับประกันประสบการณ์ออนไลน์ที่รวดเร็ว ตอบสนอง และน่าดึงดูด